<template>
  <div id="app">
    <com></com>
    <home class="home"></home>
    <div class="footer" v-if="info.showFot">
      <ul >
        <li :style="{color:active==index ? '#fff':'black'}" v-for="(item, index) in list" :key="index" @click="jump(item,index)">{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import home from './views/home'
export default ({
 name:'App',
 components:{home},
 data(){
    return{
      active:0,
      list:[
        {title:'微信',name:'wechat',path:'/home/wechat.vue'},
        {title:'联系人',name:'mail',path:'./mail.vue'},
        {title:'发现',name:'fri',path:'./fri.vue'},
        {title:'我的',name:'my',path:'./my.vue'},
      ],
      info:{
        showFot:true
      },
    }
  },
   watch:{
    "$route":{//监控路由元信息 只要发生变化就走到handler函数里面
        handler(newVla,oldVal){//监听普通的变量不需要用handler函数, 复杂函数监听  固定命名方法
            // console.log('newVla',newVla)
            console.log('oldVal',oldVal)
            // this.info = newVla.meta;
            this.info = Object.assign(this.info,{showFot:true},newVla.meta);
            //因为布尔值为false的时候不能覆盖掉页面上的true 所以要重置 合并覆盖路由元信息
        },
        deep:true,//是否深度监听如果监听的是对象就必须添加下面那条
        immediate:true//是否初次监听
    }
    },
  methods:{
    jump(item,index){
      this.active = index
      this.$router.push({
        name: item.name,
        path: item.path
      })
    },
  }
})
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
.footer{
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: indianred;
  ul{
    display: flex;
    justify-content: space-around;
    list-style: none;
    li{
      line-height: 60px;
      width: 25%;
      text-align: center;
    }
  }
}
.home{
  background: #333;
}
</style>
